<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline">
   <el-form-item label="排序条件">
    <el-select v-model="condition" placeholder="排序条件" @change="changeCondition">
       <el-option label="修改时间" value="1"></el-option>
      <el-option label="创建时间" value="2"></el-option>
    </el-select>
  </el-form-item>


<el-form-item label="排序类型">
    <el-select v-model="sort" placeholder="排序条件" @change="changeSort">
      <el-option label="升序" value="1"></el-option>
      <el-option label="降序" value="2"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button type="primary" @click="addAnn()">发布公告</el-button>
  </el-form-item> 



   <el-table
    :data="Data"
    border
    style="width:1200px">
    <el-table-column
      fixed
      prop="id"
      label="公告id"
      width="200">
    </el-table-column>
    <el-table-column
      prop="content" 
      label="公告内容"
      width="400">
    </el-table-column>
    <el-table-column
      prop="updatetime"
      label="修改时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="createtime"
      label="创建时间"
      width="200">
    </el-table-column>
  
  
    
    <el-table-column

      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="toEditor(scope.row)">修改</el-button></el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form>

<el-pagination
@current-change="topages"
@next-click="next"
@prev-click="pre"
  background
  layout="prev, pager, next"
  :page-size="size"
  :total="total">
</el-pagination>



<el-dialog
  title="发布公告"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
  

<el-form :label-position="labelPosition" label-width="80px">
  <el-form-item label="公告内容">
    <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="announcement.content">
</el-input>
  </el-form-item>
</el-form>

    <el-button @click="noUpdate" >取 消</el-button>
    <el-button type="primary" @click="add()">确 定</el-button>
  </span>
</el-dialog>


<el-dialog
  title="修改公告"
  :visible.sync="dialogVisible1"
  :before-close="handleClose">
  

<el-form :label-position="labelPosition" label-width="80px">
  <el-form-item label="公告内容">
    <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="announcement.content">
</el-input>
  </el-form-item>
</el-form>

    <el-button @click="noUpdate" >取 消</el-button>
    <el-button type="primary" @click="updateBlog()">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
 data() {
      return {
        // 公告处理
        announcement:{
            id:"",
            content:""
        },

        // 分页数据处理
        current:1,
        size:10,

        // 排序条件
        condition:"",
        // 排序类型
        sort:"",
        // 修改图片的名字
        upid:"",
        // 通过的验证字段
        isaudit:false,
         labelPosition: 'left',

        // 数据集合
        Data:[],

        // 以下为分页器
        total:89,

        // 显示提示框(查看的)
         dialogVisible: false,
        //  显示提示框（编辑的）
        dialogVisible1:false,
      }
    },
    mounted() {
        this.getannouncement()
    },
    methods: {
        // 开始添加新的公搞
        add(){
            this.$API.announcement.addannouncement(this.announcement.content).then((e)=>{
             this.$message({
          message: "发布成功",
          type: 'success'
        });
         this.announcement.id=""
       this.announcement.content=""
       this.dialogVisible=false
        }).catch((e)=>{
          this.$message.error("发布失败");
        })
       
        this.getannouncement()
        },
        // 添加新的公告的显示
        addAnn(){
            this.dialogVisible=true
        },

      // 删除公告
      del(e){
          this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$API.announcement.delannouncement(e.id).then(()=>{
             this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getannouncement()
          }).catch((e)=>{
             this.$message({
            type: 'error',
            message: e
          });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 排序条件
      changeCondition(e){
        this.condition=e
        console.log(this.condition);
      },
      // 排序类型
      changeSort(e){
        this.sort=e
        console.log(this.sort);
      },
      // 确认修改
      updateBlog(){
        console.log(this.announcement);
        this.$API.announcement.updateannouncement(this.announcement).then((e)=>{
             this.$message({
          message: "修改成功",
          type: 'success'
        });
         this.announcement.id=""
       this.announcement.content=""
       this.dialogVisible1=false
        }).catch((e)=>{
          this.$message.error("修改失败");
        })
       
        this.getannouncement()
      },
      // 取消修改
      noUpdate(){
        this.dialogVisible1 = false
        this.announcement.id=""
        this.announcement.content=""
      },
      // 修改选项
      changeSelect1(e){
        console.log(e);
        console.log(e==0);
        if(e==0){
          this.isaudit=true
        }
      },
      // 编辑
      toEditor(e){   
        this.announcement.id=e.id
        this.announcement.content=e.content
        this.dialogVisible1=true
      },
      // 获取所有数据
      selall(){
        this.sort=""
        this.condition=""
        this.getannouncement()
      },
      // 获取文章详情
      async getBlogInfo(id){
        let result=await this.$API.blog.getBlogInfo(id)
        this.bloginfo=result.data.content
      },
      // 获取分类
      changeSelect(e){
        console.log(e); 
        this.cname=e
      },
      // 获取分类数据
      async getClassifys(){
        const result=await this.$API.blog.getClassifys()
        if(result.code==200){
          this.Classify=result.data
          console.log(this.Classify);
        }
      },
      // 切换页面
      topages(e){
        this.current=e
        this.getannouncement()
      },
      //切换下一页
      next(){
       this.current++
       this.getannouncement()
      },
      // 切换上一页
      pre(){ 
        this.current--
        this.getannouncement()
      },
        // 页面初始化的数据
        async getannouncement(){

            const result =await  this.$API.announcement.getannouncement(this.condition,this.sort,this.current,this.size)
            console.log(result);
           if(result.code==200){
            this.Data=result.data.records
            this.total=result.data.total
           }
        },
       async onSubmit() {
        this.getannouncement()
      },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
               this.announcement.id=""
       this.announcement.content=""
            done();
          })
          .catch(_ => {});
      }
    }
  
}
</script>

<style>
.el-pagination{
    margin-top: 50px;
}


</style>